<template>
  <div>
    <div class="tableBox">
      <div class="topSearch">
        <div class="form">
          <el-form
            ref="form"
            :model="searchParams"
            label-width="10px"
            class="formSelf"
          >
            <el-form-item>
              <el-input
                placeholder="作业票编号"
                v-model="searchParams.printingJobId"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-input
                placeholder="作业地点"
                v-model="searchParams.printingJobPlace"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-select v-model="searchParams.node" placeholder="节点">
                <el-option
                  v-for="item in options1"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <!-- <el-form-item>
              <el-select v-model="searchParams.status" placeholder="状态">
                <el-option
                  v-for="item in options2"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item> -->

            <el-form-item>
              <el-button
                class="search"
                icon="el-icon-search"
                @click="searchForm"
                >查询</el-button
              >
              <el-button
                class="reset"
                icon="el-icon-refresh-right"
                @click="resetForm"
                >重置</el-button
              >
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div class="table">
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="printingJobId" label="作业票编号">
          </el-table-column>
          <el-table-column prop="printingJobType" label="作业票类型">
          </el-table-column>
          <el-table-column prop="printingJobGrade" label="作业等级">
            <!-- <template slot-scope="scope">
              <div
                :class="{
                  yellowC: scope.row.carStatus == 1,
                  redC: scope.row.carStatus == 3,
                }"
              >
                {{ scope.row.carStatusDesc }}
              </div>
            </template> -->
          </el-table-column>
          <el-table-column prop="beginTime" label="开始时间"> </el-table-column>
          <el-table-column prop="endTime" label="结束时间"> </el-table-column>

          <el-table-column prop="printingJobPlace" label="作业地点">
          </el-table-column>
          <el-table-column prop="node" label="节点">
            <!-- <template slot-scope="scope">
              <div>
                <el-image
                  style="width: 100px; height: 50px"
                  :src="scope.row.carImage"
                  :preview-src-list="scope.row.srcList"
                >
                </el-image>
              </div>
            </template> -->
          </el-table-column>

          <!-- <el-table-column align="center" prop="address" label="操作">
            <template slot-scope="scope">
              <div class="btnBox">
                <div
                  slot="reference"
                  class="first"
                  @click="addVehicle(scope.row)"
                >
                  修改
                </div>
                <div
                  slot="reference"
                  class="first"
                  @click="deleteVehicle(scope.row)"
                >
                  删除
                </div>
              </div>
            </template>
          </el-table-column> -->
        </el-table>
      </div>
      <div class="footerPage">
        <el-pagination
          :current-page="searchParams.page"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="10"
          layout="total, sizes, prev, pager, next"
          :total="tableTotal"
          @size-change="handleSizeChange"
          @current-change="currentPage"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { getTicketListApi } from "@/api/workManagement";
export default {
  name: "",
  props: {
    pintType: {
      type: String,
      default: "",
    },
  },
  components: {},
  data() {
    return {
      searchParams: {
        page: 1,
        pageSize: 10,
        printingJobId: "",
        printingJobPlace: "",
        node: "",
        status: "",
      },
      options1: [
        {
          value: "0",
          label: "申请中",
        },
        {
          value: "1",
          label: "安全分析",
        },
        {
          value: "2",
          label: "交底监护",
        },
        {
          value: "3",
          label: "负责人签字",
        },
        {
          value: "4",
          label: "审批人签字",
        },
        {
          value: "5",
          label: "班组长签字",
        },
        {
          value: "6",
          label: "作业中",
        },
        {
          value: "7",
          label: "已完成",
        },
      ],
      options2: [
        {
          value: "1",
          label: "状态1",
        },
      ],
      tableData: [],
      tableTotal: null,
    };
  },
  methods: {
    searchForm() {
      this.getTicketList();
    },
    resetForm() {
      this.searchParams = {
        page: 1,
        pageSize: 10,
        printingJobId: "",
        printingJobPlace: "",
        node: "",
        status: "",
      };
      this.getTicketList();
    },
    addVehicle() {},
    deleteVehicle() {},
    currentPage(val) {
      this.searchParams.page = val;
      this.getTicketList();
    },
    handleSizeChange(val) {
      this.searchParams.pageSize = val;
      this.getTicketList();
    },
    async getTicketList() {
      const res = await getTicketListApi({
        page: this.searchParams.page,
        pageSize: this.searchParams.pageSize,
        printingJobId: this.searchParams.printingJobId,
        printingJobPlace: this.searchParams.printingJobPlace,
        node: this.searchParams.node,
        status: this.searchParams.status,
        printingType: this.pintType,
      });
      console.log(res);
      this.tableData = res.data.records;
      this.tableTotal = res.data.total;
    },
  },
  mounted() {},
  watch: {},
  computed: {},
  filters: {},
};
</script>

<style scoped lang="scss">
.tableBox {
  margin-top: 16px;
  background-color: #fff;
  padding: 16px;

  .topSearch {
    background-color: #fff;
    height: 68px;
    display: flex;
    align-items: center;
    margin-bottom: 16px;
    .formSelf {
      display: flex;
      align-items: center;
      height: 68px;
      display: flex;
      align-items: center;
      .el-form-item {
        margin-bottom: 0px;
      }
      .search {
        background-color: #0077ff;
        color: #fff;
      }
      .reset {
        color: #0077ff;
        border: 1px solid #0077ff;
      }
      ::v-deep.el-input__inner {
        // background-color: #F5F5FA !important;
        color: #333 !important;
      }
      .el-input {
        width: 150px;
      }
      .el-select {
        width: 150px;
      }
    }
  }
  .footerPage {
    padding: 0 30px 0 0;
    display: flex;
    justify-content: right;
    width: 100%;
    background-color: #f8fafc;
    height: 50px;
    align-items: center;
    margin-top: 10px;

    //  ::v-deep .el-pagination .btn-next, .el-pagination .btn-prev{
    //   background-color: #087 !important;
    // }
  }

  .btnBox {
    display: flex;
    justify-content: center;
    align-items: center;
    .first {
      // width: 25px;
      height: 25px;
      line-height: 25px;
      // background-color: #4285f4;
      padding: 0 5px;
      color: #0077ff;
      text-align: center;
      border-radius: 5px;
      cursor: pointer;
    }
    .second {
      // width: 100px;
      height: 25px;
      line-height: 25px;
      background-color: #4285f4;
      color: #fff;
      text-align: center;
      margin-left: 5px;
      border-radius: 5px;
      cursor: pointer;
    }
    .third {
      // width: 50px;
      height: 25px;
      line-height: 25px;
      background-color: #d72e2e;
      color: #fff;
      text-align: center;
      margin: 0 5px;
      border-radius: 5px;
      cursor: pointer;
    }
    .third2 {
      width: 50px;
      height: 25px;
      line-height: 25px;
      background-color: #4285f4;
      color: #fff;
      text-align: center;
      margin: 0 5px;
      border-radius: 5px;
      cursor: pointer;
    }
    .last {
      width: 25px;
      height: 25px;
      line-height: 25px;
      background-color: #d72e2e;
      color: #fff;
      text-align: center;
      border-radius: 5px;
      cursor: pointer;
    }
  }
  .redC {
    color: #ff3057;
  }
  .yellowC {
    color: #ffd321;
  }
}
</style>
